var PurchaseReturnOrder = function () {
  var SearchForm = function () {
    var template = /* html */ `
      <div class="search-form">
        <el-form inline label-width="auto">
          <el-form-item label="物料名称">
            <el-input v-model="search.materialName" class="search-input"></el-input>
          </el-form-item>
          <el-form-item label="规格型号">
            <el-input v-model="search.model" class="search-input"></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="search.color" class="search-input"></el-input>
          </el-form-item>
          <el-form-item label="供应商">
            <el-input v-model="search.providerName" class="search-input"></el-input>
          </el-form-item>
          <el-form-item label="系统订单编号">
            <el-input v-model="search.orderId" class="search-input"></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="search.companyOrderId" class="search-input"></el-input>
          </el-form-item>
          <el-form-item label="工厂型号">
            <el-input v-model="search.factoryNo" class="search-input"></el-input>
          </el-form-item>
          <el-form-item label="客户型号">
            <el-input v-model="search.articleNo" class="search-input"></el-input>
          </el-form-item>
        </el-form>
      </div>
    `;

    return {
      props: {
        search: {
          type: Object,
          required: true
        }
      },

      data: function () {
        return {};
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="purchase-return-order" v-loading.fullscreen.lock="loading">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>

      <div class="purchase-return-order-table-div">
        <el-table fit stripe border :data="orderList" style="width: 100%" height="parent">
          <el-table-column prop="companyOrderId" label="订单编号" min-width="140px" header-align="center"></el-table-column>
          <el-table-column prop="orderId" label="系统订单编号" min-width="140px" header-align="center"></el-table-column>
          <el-table-column prop="factoryNo" label="工厂型号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="articleNo" label="客户型号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="providerName" label="供应商" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialName" label="物料名称" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="color" label="编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="model" label="规格型号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="序号" width="45px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.rowIndex===-1?0:scope.row.rowIndex}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="purchaseCount" label="采购数量" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="退回日期" min-width="100px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.approvalTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="approvalReason" label="退回原因" min-width="140px" header-align="center"></el-table-column>
        </el-table>
      </div>

      <div style="margin-top:5px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount"
          :current-page.sync="pagination.currentPage" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  `;

  return {
    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        orderId: '',
        companyOrderId: '',
        factoryNo: '',
        articleNo: ''
      };
      return {
        loading: false,
        orderList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        moment:moment
      };
    },

    created: function () {
      this.setOrderList(true);
    },

    methods: {
      setOrderList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var pageSize = pagination.pageSize;
        var start = (pagination.currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        var search = this.search;
        var fields = ['materialName', 'model', 'color', 'providerName', 'orderId', 'companyOrderId', 'factoryNo', 'articleNo'];
        SysUtil.setPostData(postData, search, fields);
        
        this.loading = true;
        var self = this;
        ajaxRequest('purchaseOrder/getPurchaseOrderForBackList',postData).then(function(res){
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }
          
          var orderList = res.returnData;
          
          self.orderList = orderList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setOrderList(true);
      },

      pageChange:function(){
        this.setOrderList();
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm
    },

    template: template
  };
}();
